<template>
    <div class="pool" v-if="!$store.state.TitleName">
        <div :class="['list',active == index ?'active':'']" v-for="(item,index) in data.filter(item => item.type == $store.state.PoolName)" :key="index" @click="itemChange(item.name,index)">
            <img draggable="false" :src="item.imgUrl" alt="">
            <span>{{item.name}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [
                { name: '基本形状', imgUrl: require('../assets/img/icon_基本形状.png'), type: '形状' },
                { name: '图标', imgUrl: require('../assets/img/icon_图标.png'), type: '形状' },
                { name: '按钮', imgUrl: require('../assets/img/icon_按钮.png'), type: '形状' },
                { name: '基础柱状图', imgUrl: require('../assets/img/icon_基础柱状图.png'), type: '图表' },
                { name: '堆叠柱状图', imgUrl: require('../assets/img/icon_堆叠柱状图.png'), type: '图表' },
                { name: '基础条形图', imgUrl: require('../assets/img/icon_基础条形图.png'), type: '图表' },
                { name: '堆叠条形图', imgUrl: require('../assets/img/icon_堆叠条形图.png'), type: '图表' },
                { name: '折线图', imgUrl: require('../assets/img/icon_折线图.png'), type: '图表' },
                { name: '曲线图', imgUrl: require('../assets/img/icon_曲线图.png'), type: '图表' },
                { name: '面积图', imgUrl: require('../assets/img/icon_面积图.png'), type: '图表' },
                { name: '基础环图', imgUrl: require('../assets/img/icon_基础环图.png'), type: '图表' },
                { name: '基础饼图', imgUrl: require('../assets/img/icon_基础饼图.png'), type: '图表' },
                { name: '多环图', imgUrl: require('../assets/img/icon_多环图.png'), type: '图表' },
                { name: '雷达图', imgUrl: require('../assets/img/icon_雷达图.png'), type: '图表' },
                { name: '仪表盘', imgUrl: require('../assets/img/icon_仪表盘.png'), type: '图表' },
                { name: '百分比叠柱图', imgUrl: require('../assets/img/icon_百分比叠柱图.png'), type: '图表' },
                { name: '百分比叠条图', imgUrl: require('../assets/img/icon_百分比叠条图.png'), type: '图表' },
                { name: '玉玦图', imgUrl: require('../assets/img/icon_玉玦图.png'), type: '图表' },
                { name: '堆叠折线图', imgUrl: require('../assets/img/icon_堆叠折线图.png'), type: '图表' },
                { name: '堆叠面积图', imgUrl: require('../assets/img/icon_堆叠面积图.png'), type: '图表' },
                { name: '堆叠曲线图', imgUrl: require('../assets/img/icon_堆叠曲线图.png'), type: '图表' },
                { name: '图片', imgUrl: require('../assets/img/icon_基本形状.png'), type: '多媒体' },
                { name: '时间控件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '时钟控件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '层级树', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '容器组件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '视频组件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '日历组件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '数值组件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '图片轮播器', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: 'Tips容器组件', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
                { name: '统计表', imgUrl: require('../assets/img/icon_基本形状.png'), type: '通用' },
            ],
            active: null,
        }
    },
    computed: {},
    watch: {
        '$store.state.PoolName': function (e) {
            this.active = null
        },
    },
    methods: {
        itemChange(name, index) {
            this.active = index
            this.$store.commit('setTitleName', name)
        },
    },
    created() {},
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    components: {},
}
</script>

<style lang='scss' scoped>
.pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    padding-bottom: 50px;
    width: 81%;
    position: absolute;
    right: 0;
    top: 45px;
    background: #1a1f32;
    z-index: 1;
    
    
}
.pool::-webkit-scrollbar {
    display: none;
}
.list {
    width: 45%;
    cursor: grab;
    margin-bottom: 15px;
    text-align: center;
    color: #333;
    padding: 2px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
    flex-direction: column;
    background: #d8d8d81a;
    border-radius: 4px;
}
.list:hover {
    background: #5bc4d633;
}
span {
    color: #ffffff40;
    font-size: 10px;
}
.active {
    border: 1px solid #5bc4d6;
    background: #5bc4d633;
}
</style>